<%--
  Created by IntelliJ IDEA.
  author: Jsonor
  date: 2018/5/17 13:53
  description: Description
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<html>
<head>
  <title>Title</title>
</head>
<style>
  ul{list-style-type:none;}
  #star{position:relative;width:100%;margin:5px;height:26px;line-height:26px;}
  #star ul,#star span{float:left;display:inline;height:26px;line-height:26px;}
  #star ul{margin:0px 5px; padding:0px;}
  #star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(http://a.tbcdn.cn/app/rc/img/star.png) no-repeat;}
  #star li.on{background:url(img/star.png) no-repeat;}
</style>

<body>
<!--

        # 星级评分

        # star:value = 分数

-->

<div id="star">
  <span>点击星星就能评价</span>
  <ul style="width:150px;">
    <li><a href="javascript:;">1</a></li>
    <li><a href="javascript:;">2</a></li>
    <li><a href="javascript:;">3</a></li>
    <li><a href="javascript:;">4</a></li>
    <li><a href="javascript:;">5</a></li>
  </ul>
  <asp:HiddenField runat="server" ID="sGrade" Value="0" />  //保存点击的是第几颗星星，用于直接和后天交互
</div>
</body>

<script>
  window.onload = function() {
    var oStar = document.getElementById("star");
    var aLi = oStar.getElementsByTagName("li");
    var i = iScore = iStar = 0;
    for (i = 1; i <= aLi.length; i++) {
      aLi[i - 1].index = i;
      //鼠标移过显示分数
      aLi[i - 1].onmouseover = function() {
        fnPoint(this.index);
      };
      //鼠标离开后恢复上次评分
      aLi[i - 1].onmouseout = function() {
        fnPoint();
      };
      //点击后进行评分处理
      aLi[i - 1].onclick = function() {
        iStar = this.index;
        document.getElementById("sGrade").value = this.index;
      }
    }
    //评分处理
    function fnPoint(iArg) {
      //分数赋值
      iScore = iArg || iStar;
      for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
    }
  };
</script>
</html>
